import React from "react"
import { Tabs, WhiteSpace, Badge ,Icon} from 'antd-mobile';
import Tabmain from './index.js'
// import Star from './star.js'
import Listmain from './list.js'
import querystring from "query-string"
import Sortlist from './sortlist.js'


import "./listresult.css"

import Sxlist from './sxlist'

import { getflxq } from '../../api/index.js'


const tabs = [
    { title: <Badge> 分类</Badge> },
    { title: <Badge>排序</Badge> },
    { title: <Badge>筛选</Badge> },
];
// const data = {
//     "latitude": 32.016137,
//     "longitude": 118.755502,
//     "id": 213
// }


class TabExample extends React.Component {
    constructor() {
        super();
        this.state = {
            label:"分类",
            flag1: false,
            flag2: false,
            flag3: false,
            data: {
                "latitude": 32.016137,
                "longitude": 118.755502,
                "id": 237
            },
            odata:{
                "latitude": 32.016137,
                "longitude": 118.755502,
                "order":4
            }

        }
        this.myRef = React.createRef();
        this.myRef1 = React.createRef();
        this.myRef2 = React.createRef();
    }
    // clickHandler(tab, index) {
    //     console.log(1)
    // }
    Getlabel(label){
        console.log(label)
        this.setState({
            label:label
        })
    }
    sendshopid(id) {    //获得子组件点击过后传过来的id
        this.setState({
            data: {
                "latitude": 32.016137,
                "longitude": 118.755502,
                "id":id
            }
        })
        console.log(this.state.data)
    }

    sendcode(order){   //获取子组件传递过来的order码
        this.setState({
            odata:{
                "latitude": 32.016137,
                "longitude": 118.755502,
                "order":order
            }
        })
        console.log(this.state.odata)
    }
    componentWillMount(){
        // console.log(this.props.location.search)
        const res = querystring.parse(this.props.location.search)
        console.log(res.sortid)
        const jingweidu = JSON.parse(localStorage.getItem("geohash"))

        this.setState({
            label:res.name,
            data:{...{
                latitude:jingweidu.latitude,
                longitude:jingweidu.longitude,
                id:parseInt(res.sortid),
                order:1,
                flag:"1111"
            }}
        })
    }










    // }
    render() {
        console.log(this.state.data)
        
        return (
            <div className='bestwish'>

                <div className='tabthreepos'>
                    <div className='tabthree_bottom'>
                            <Icon type="left" className="login-main-leftIcon" />
                            <div className="loginText">{this.state.label}</div>
                            <span className="LoginRight"></span>
                    </div>


                    {/* <div className='tabthreepos'> */}
                    <Tabs tabs={tabs}
                        animated={false}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={function (tab, index) {
                            // console.log(index, this)
                            if (index == 0) {
                                this.setState({
                                    flag1: !this.state.flag1,
                                    flag2: false,
                                    flag3: false
                                })
                                if (this.myRef.current.style.height == "0px") {
                                    this.myRef.current.style.height = "565px"
                                } else {
                                    this.myRef.current.style.height = "0px"
                                }
                            } else if (index == 1) {
                                this.setState({
                                    flag1: false,
                                    flag2: !this.state.flag2,
                                    flag3: false
                                })
                                if (this.myRef1.current.style.height == "0px") {
                                    this.myRef1.current.style.height = "550px"
                                } else {
                                    this.myRef1.current.style.height = "0px"
                                }
                            } else {
                                this.setState({
                                    flag1: false,
                                    flag2: false,
                                    flag3: !this.state.flag3
                                })
                                if (this.myRef2.current.style.height == "0px") {
                                    this.myRef2.current.style.height = "300px"
                                } else {
                                    this.myRef2.current.style.height = "0px"
                                }
                            }
                            // console.log(this.myRef.current.style.height)





                        }.bind(this)}
                    >
                        <div className="msite-show" ref={this.myRef} style={this.state.flag1 ? { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' } : { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' }}>
                            <Tabmain dom={this.myRef} sendlistid={this.sendshopid.bind(this)} getlabel={this.Getlabel.bind(this)}/>
                        </div>
                        <div className="msite-show" ref={this.myRef1} style={this.state.flag2 ? { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' } : { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' }}>
                           <Sortlist dom2={this.myRef1}  order={this.sendcode.bind(this)}/>
                    </div>
                        <div className="msite-show" ref={this.myRef2} style={this.state.flag3 ? { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' } : { alignItems: 'center', justifyContent: 'center', height: '0', backgroundColor: '#fff' }}>
                        <Sxlist />
                    </div>

                    </Tabs>


                </div>

                <div className='tabthree-listmain'>
                    <Listmain data={this.state.data} odata={this.state.odata}/>
                </div>



                <WhiteSpace />


            </div>
        )
    }
}



export default TabExample